<template>
<div class="wrapper">
    <div class="top">
        <a-card style="width: 100%;">
            <div class="cont">
                <div class="banner">
                    <a-input-search
                        v-model:value="value"
                        placeholder="input search text"
                        enter-button
                        @search="onSearch"
                        style="width: 400px;"
                        />
                </div>
                <div class="carousel">
                    <a-carousel effect="fade">
                        <div><h3>1</h3></div>
                        <div><h3>2</h3></div>
                        <div><h3>3</h3></div>
                        <div><h3>4</h3></div>
                    </a-carousel>
                </div>
            </div>
        </a-card>
        <div class="menu">
            <a-card style="width: 100%; height: 100%;">
                <a-menu
                    id="perchase"
                    v-model:openKeys="openKeys"
                    v-model:selectedKeys="selectedKeys"
                    :style="{width: '100%', 'font-size': '18px'}"
                    mode="inline"
                    :items="items"
                    @click="handleClick"
                ></a-menu>
            </a-card>
        </div>
    </div>
    <div class="head">
        热门品牌
    </div>
    <div class="brands">
        <a-card style="width: 80%; height: 400px;">

        </a-card>
    </div>
    <div class="head">
        为你推荐
    </div>
    <div class="recommend">
        <a-card style="width: 80%; height: 400px;">

        </a-card>
    </div>
</div>
</template>

<script setup>
import { reactive, ref, watch, h } from 'vue'
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'
const selectedKeys = ref(['1'])
const openKeys = ref(['sub1'])
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = reactive([
  getItem('Navigation One', 'sub1', () => h(MailOutlined), [
    getItem('Item 1', 'g1', null, [
      getItem('建筑工程', '1'), 
      getItem('装饰工程', '2'),
      getItem('安装工程', '3'),
      getItem('市政工程', '4'),
      getItem('园林绿化', '5'),
      getItem('城市轨道', '6'),
      getItem('仿古建筑', '7')], 'group')
  ])
])
</script>

<style scoped>
.wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.top{
    position: relative;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.head{
    width: 80%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: orange;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 60px;
}
.brands{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.recommend{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.menu{
    position: absolute;
    width: 20%;
    left: 0;
    height: 100%;
}
.banner{
    height: 100px;
}
.cont{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.carousel{
    width: 800px;
}
:deep(.slick-slide) {
  text-align: center;
  height: 400px;
  line-height: 400px;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style>